<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden"
  >
    <a-form :form="form">

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="任务名称">{{process.modelName}}</a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="任务关键字">{{process.keyWord}}</a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始时间">{{process.beginTime}}</a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结束时间">{{process.beginTime}}</a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件">
        <a-list v-if="process.attachments">
          <a-list-item
            v-for="(item,index) in process.attachments.split(',')"
            :key="'attachment-'+index"
          >
            <a :href="item" download="abc">{{item |fileName}}</a>
          </a-list-item>
        </a-list>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="牵头单位">{{process.department}}</a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">{{process.remark}}</a-form-item>
      <template v-if="opinionList && opinionList.length > 0">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审批过程">
          <a-list item-layout="horizontal">
            <a-list-item v-for="(item,index) in opinionList" :key="'list-item'+index">
              <a slot="actions">{{item.flag}}</a>
              <a-list-item-meta :description=" item.createTime">
                <span slot="title">{{ item.opName }}</span>
              </a-list-item-meta>
              <div>{{item.opinion}}</div>
            </a-list-item>
          </a-list>
        </a-form-item>>
      </template>
    </a-form>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getProcessDetails, getTaskOpinions } from '@/api/activiti'

export default {
  name: 'ProcessViewModal',
  components: {},
  data() {
    return {
      title: '任务详情',
      visible: false,
      process: {},
      opinionList: [],
      opinionColumns: [
        {
          title: '审批用户',
          align: 'center',
          dataIndex: 'userName'
        },
        {
          title: '审批时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '审批意见',
          align: 'center',
          dataIndex: 'opinion'
        },
        {
          title: '审批结果',
          align: 'center',
          dataIndex: 'flag'
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        opinion: {
          rules: [{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }]
        }
      }
    }
  },
  computed: {
    uploadAction() {
      return window._CONFIG['domianURL'] + '/sys/common/upload'
    },
    urlDownload() {
      return window._CONFIG['domianURL'] + '/sys/common/download/'
    }
  },
  filters: {
    fileName(link) {
      if (!link) {
        return ''
      }
      if (link.indexOf('/') < 0) {
        return link
      }
      let file = link.substr(link.lastIndexOf('/') + 1)
      let extIndex = file.lastIndexOf('.')
      return file.substring(0, extIndex - 14) + file.substr(extIndex)
    }
  },
  methods: {
    show(record) {
      this.form.resetFields()
      this.process = Object.assign({}, record)
      this.loadOptionList(record.id)
      this.visible = true
    },
    loadOptionList(processId) {
      var vm = this
      getTaskOpinions(processId).then(res => {
        if (res.success && res.result && res.result.length > 0) vm.opinionList = [].concat(res.result)
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>
</style>